<template>
  <div class="shop">
    <van-nav-bar fixed z-index="10">
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
    </van-nav-bar>

    <div style="height: 46px"></div>

    <div>
      <video
        style="width: 100vw"
        loop
        autoplay
        controls
        src="/baking1/let_it_go.mp4"
      ></video>
    </div>
    <ul class="bigul" style="margin: 0 10px">
      <li class="frist">
        <h3>3款纯手工脆皮火腿肠（玉米味/黑椒味/烧烤味）</h3>
        <van-icon name="friends-o">1000+人在学</van-icon>
      </li>
      <li>
        <van-cell is-link @click="show = true">
          <template #title>
            <ul id="fuwu">
              <li v-for="i in 8" :key="i">
                <h4 style="padding: 0">· 永久回看</h4>
              </li>
            </ul>
          </template>
        </van-cell>
        <van-action-sheet v-model="show" title="服务">
          <div class="content" style="height: 50vh">
            <ul>
              <li v-for="i in 10" :key="i">
                <h3>·永久无限次回看</h3>
                <h4>
                  永久无限次回看永久无限次回看永久无限次回看永久无限次回看永久无限次回看永久无限次回看永久无限次回看永久无限次回看
                </h4>
              </li>
            </ul>
          </div>
        </van-action-sheet>
      </li>
      <li>
        <div class="articleItem">
          <div class="nav">
            <van-nav-bar>
              <template #right>
                <router-link to="/">查看全部</router-link>
              </template>
              <template #left>
                <h3 style="margin: 0 0 0 -16px">学员作业</h3>
              </template>
            </van-nav-bar>
          </div>
          <div class="box">
            <div
              v-for="i in 4"
              :key="i"
              class="pic-box"
              style="width: 22vw; display: flex"
            >
              <img
                style="width: 100%; display: block"
                src="/baking1/Fge9lvM93fLrIJCBduFWDkbhbGJI.png"
              />
            </div>
          </div>
        </div>
      </li>
      <li>
        <h3>你将学会</h3>
        <ul>
          <li>
            <p>
              1.处理肠衣无异味的方法处理肠衣无异味的方法处理肠衣无异味的方法处理肠衣无异味的方法
            </p>
          </li>
          <li>
            <p>2.处理肠衣无异味的方法</p>
          </li>
          <li>
            <p>3.处理肠衣无异味的方法</p>
          </li>
          <li>
            <p>4.处理肠衣无异味的方法</p>
          </li>
          <li>
            <p>5.处理肠衣无异味的方法</p>
          </li>
          <li>
            <p>6.处理肠衣无异味的方法</p>
          </li>
          <li>
            <p>7.处理肠衣无异味的方法</p>
          </li>
        </ul>
      </li>
      <li>
        <h3>课程介绍</h3>
        <ul>
          <li>
            <p>
              脆皮肠是一种常见美食，它休闲吃、烧烤吃、佐菜吃都可以，Q弹的口感和充满食欲的色泽，深受人们，特别是孩子的喜爱。
            </p>
          </li>
          <li>
            <p>
              不过随着人们对食品安全的重视，市售脆皮肠的问题也令人担忧，肉含量低，肉质存疑不说，色素、香精、食用胶、防腐剂这四大天王，是一样也少不了，看一眼市售脆皮肠的配料表，简直就像在读化学元素周期表。
            </p>
          </li>
          <li>
            <p>
              今天，阿涛为帮友们带来玉米脆皮肠、黑椒脆皮肠、烧烤脆皮肠三款口味，高达90%以上的肉含量，材料简单，超市即可一站购齐，确保纯手工，无添加，健康放心。
            </p>
          </li>
        </ul>
      </li>
      <li>
        <h3>导师介绍</h3>
        <ul>
          <li>
            <div style="display: flex">
              <van-image width="50" height="50" src="/baking1/logo@57.png" />
              <p>丐帮帮主</p>
            </div>
            <p>帮主阿涛，烘焙帮联合创始人、烘焙帮帮主。</p>
          </li>
          <li>
            <p>
              在烘焙帮订阅号发布原创食谱一千多篇，原创视频上百条，阅读人和观看人次超过2000万。其中很多烘焙萌新，都由帮主阿涛的方子，进入烘焙这个甜蜜的坑。
            </p>
          </li>
        </ul>
      </li>
      <li style="margin: 0 -10px" id="artic">
        <recipe-floor></recipe-floor>
      </li>
      <li>
        <ul>
          <li>
            <img
              style="width: 25vw"
              src="/baking1/FgyNuZ8yE795vzF-O4lGF3G5Caxr"
            />
          </li>
          <li>
            <p>
              烘焙帮学堂，是由烘焙帮推出的课程品牌，通过官方自制的教学视频，用科学的烘焙配方、细致的步骤讲解、贴心的答疑服务，让烘焙更简单！
            </p>
          </li>
          <li>
            <ul class="smallul">
              <li>
                <img
                  style="width: 22vw"
                  src="/baking1/FvihrbO1twdtKSkz2WqB9KxUjjeg"
                />
                <p>蛋糕</p>
              </li>
              <li>
                <img
                  style="width: 22vw"
                  src="/baking1/FvihrbO1twdtKSkz2WqB9KxUjjeg"
                />
                <p>甜点</p>
              </li>
              <li>
                <img
                  style="width: 22vw"
                  src="/baking1/FvihrbO1twdtKSkz2WqB9KxUjjeg"
                />
                <p>面包</p>
              </li>
              <li>
                <img
                  style="width: 22vw"
                  src="/baking1/FvihrbO1twdtKSkz2WqB9KxUjjeg"
                />
                <p>中式点心</p>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

    <div style="height: 46px"></div>

    <!-- <router-view /> -->
    <van-tabbar route>
      <div style="width: 20vw; display: flex; align-items: center">
        <van-tabbar-item replace to="/home" icon="wap-home-o"
          >更多课程</van-tabbar-item
        >
      </div>
      <div style="width: 20vw; display: flex; align-items: center">
        <van-tabbar-item replace to="/" icon="service-o">咨询</van-tabbar-item>
      </div>
      <div style="width: 60vw; background-color: orange">
        <van-tabbar-item replace to="/">
          <h3>¥9.9 购买本课程</h3>
        </van-tabbar-item>
      </div>
    </van-tabbar>
  </div>
</template>

<script>
import RecipeFloor from "@/components/RecipeFloor.vue";
import shopFloor from "../components/ShopFloor.vue";
export default {
  components: { shopFloor, RecipeFloor },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    getData() {
      // const url =
      //   "https://api.hongbeibang.com/education/getCourse?_t=1666612354991&educationCourseId=10481&timestamp=1666612354991";
      // this.axios.get(url).then((res) => {
      //   console.log(res);
      //   this.data.res.data;
      // });
    },
  },
};
</script>

<style scoped>
:deep(.van-nav-bar .van-icon) {
  color: #000;
}
:deep(.van-icon:before) {
  line-height: 24px;
}
:deep(.van-cell--clickable) {
  padding: 0;
}
</style>

<style lang="scss" scoped>
.shop {
  background-color: #fff;
}
p {
  color: #323233;
}
.bigul > li {
  // margin: 0 10px;
  padding-bottom: 20px;
}
.bigul > .frist > h3 {
  margin: 10px 0 0 0;
}
#fuwu {
  color: gray;
  display: flex;
  flex-wrap: wrap;
}

#fuwu li h4 {
  margin: 0 10px 0 0;
}

.content {
  h3 {
    margin: 0;
  }

  h4 {
    margin: 0 0 10px 10px;
  }
}
.bigul > li {
  padding-bottom: 20px;
}

.box {
  display: flex;
  justify-content: space-around;
}
.smallul {
  display: flex;
  justify-content: space-around;
  text-align: center;
  li {
    p {
      margin: 0;
    }
  }
}
.articleItem {
  padding: 0;
}
#artic {
  display: flex;
  overflow-x: scroll;
  /* overflow-x: hidden; */
}
#artic::-webkit-scrollbar {
  background: #fff;
}
</style>
